<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('外派月账单列表')" />
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: bootstrap-select-css" />
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li class="select-selectpicker">
                                <label>客户：</label>
                                <input type="hidden" name="customerId" th:value="${customerId}" />
                                <select class="form-control m-b" th:with="type=${@customDictService.selectDictCustomer()}" disabled>
                                    <option value="">请选择</option>
                                    <option th:each="dict : ${type}" th:text="${dict.title}" th:value="${dict.id}" th:selected="${customerId == dict.id}"></option>
                                </select>
                            </li>
                            <li class="select-selectpicker">
                                <label>项目：</label>
                                <select name="projectId"class="form-control m-b" th:with="type=${@customDictService.selectDictStaffingProject()}">
                                    <option value="">请选择</option>
                                    <option th:each="dict : ${type}" th:text="${dict.title}" th:value="${dict.id}"></option>
                                </select>
                            </li>
                            <li>
                                <label>年月：</label>
                                <input type="text" name="billYear"  style="width: 80px;"/> -  <input type="text" name="billMonth"  style="width: 40px;"/>
                            </li>

                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <div class="btn-group-sm" id="toolbar" role="group">

                <a class="btn btn-info" onclick="submitBills()" shiro:hasPermission="erp:settle:add">
                    <i class="fa fa-dollar"></i> 结算
                </a>
                <a class="btn btn-warning" onclick="$.modal.closeTab()">
                    <i class="fa fa-close"></i> 取消
                </a>
            </div>
            <div class="col-sm-12 select-table table-bordered">
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
     <th:block th:include="include :: select2-js" />
     <th:block th:include="include :: bootstrap-select-js" />
    <script th:inline="javascript">
        var prefix = "/erp/bill";

        $(function() {
            var options = {
                url: prefix + "/settle/chose",
                rememberSelected: true,
                modalName: "外派结算",
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                showFooter: true,
                // id: 'bill_table',
                footerStyle: footerStyle,
                clickToSelect: true,
                columns: [
                {
                    field: 'state',
                    checkbox: true
                },
                {
                    field: 'id',
                    title: '',
                    visible: false
                },
                {
                    field: 'customerId',
                    title: '',
                    visible: false
                },
                {
                    field: 'projectName',
                    title: '项目名称'
                },
                {
                    field: 'personName',
                    width: '60px',
                    title: '姓名'
                },
                {
                    field: 'billYear',
                    title: '年'
                },
                {
                    field: 'billMonth',
                    title: '月'
                },
                {
                    field: 'workFee',
                    title: '工时费用',
                    footerFormatter:function (value) {
                        var sumBalance = 0;
                        for (var i in value) {
                            sumBalance += parseFloat(value[i].workFee);
                        }
                        return sumBalance.toFixed(2);
                    }
                },
                {
                    field: 'overtimeFee',
                    title: '加班费',
                    footerFormatter:function (value) {
                        var sumBalance = 0;
                        for (var i in value) {
                            sumBalance += parseFloat(value[i].overtimeFee);
                        }
                        return sumBalance.toFixed(2);
                    }
                },
                {
                    field: 'expenseRateFee',
                    title: '报销结算',
                    footerFormatter:function (value) {
                        var sumBalance = 0;
                        for (var i in value) {
                            sumBalance += parseFloat(value[i].expenseRateFee);
                        }
                        return sumBalance.toFixed(2);
                    }
                },
                {
                    field: 'otherFee',
                    title: '其他费用'
                },
                {
                    field: 'totalFee',
                    title: '总结算费用',
                    footerFormatter:function (value) {
                        var sumBalance = 0;
                        for (var i in value) {
                            sumBalance += parseFloat(value[i].totalFee);
                        }
                        return sumBalance.toFixed(2);
                    }
                },
                {
                    field: 'billedFee',
                    title: '已结算费用',
                    footerFormatter:function (value) {
                        var sumBalance = 0;
                        for (var i in value) {
                            sumBalance += parseFloat(value[i].billedFee);
                        }
                        return sumBalance.toFixed(2);
                    }
                },
                {
                    field: 'payedFee',
                    title: '已收费用',
                    footerFormatter:function (value) {
                        var sumBalance = 0;
                        for (var i in value) {
                            sumBalance += parseFloat(value[i].payedFee);
                        }
                        return sumBalance.toFixed(2);
                    }
                },
                {
                    field: 'expireTime',
                    title: '收款截止期'
                }
                ]
            };
            $.table.init(options);
        });


        function footerStyle(column) {
            return {
                totalFee: {
                    css: { color: 'red'}
                }
            }[column.field]
        }

        function submitBills(){
            var customerArray = $.table.selectColumns("customerId", true);
            if (customerArray.length > 1){
                $.modal.msgError("无法跨客户结算！请分开结算！");
                return;
            }
            var arrays = $.table.selectColumns("id");
            alert(arrays);
        }

        function getSelections()
        {
            return $.table.selectedRows();
        }

    </script>
</body>
</html>